<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			div{
				display: flex;
				align-items: flex-start;
				margin-top: 30px;
			}
			label{
				flex:0 0 40%;
				text-align: right;
			}
			.btn{
				margin-left: 53.5%;
				width: 135px;
				display: flex;
				justify-content: space-between;
			}
			.username input,.password input,.btn input{
				border-style: none;
				outline: none;
				border-bottom: 2px solid darkgray;
			}
			select{
				border-style: none;
				outline: none;
				width: 166px;
			}
			.zhuangye,.username{
				display: flex;
				align-items: baseline;
			}
		</style>
	</head>
	<body>
		<h1 style="text-align: center;">表单</h1>
		<form id="form1">
			<div class="username">
				<label>用户名：</label>
				<input type="text" placeholder="请输入用户名" id="username"/>
				<input type="button" value="校验用户名是否合法" id="check"/>
			</div>
			<div class="password">
				<label>密码：</label>
				<input type="password" placeholder="请输入密码" id="password1"/>
			</div>
			<div class="password">
				<label>确认密码：</label>
				<input type="password" placeholder="请再次输入密码" id="password2" />
			</div>
			<div class="sex">
				<label>性别：</label>
				<input type="radio" name="sex" value="female" />男
				<input type="radio" name="sex" value="male"/>女
			</div>
			<div class="hobby">
				<label>爱好：</label>
				<input type="checkbox" name="hobby" value="篮球" />篮球
				<input type="checkbox" name="hobby" value="跑步"/>跑步
				<input type="checkbox" name="hobby" value="游泳"/>游泳
			</div>
			<div class="zhuangye">
				<label>专业：</label>
				<select id="zhuangye">
					<option value="计算机" id="computer" selected="selected">计算机</option>
					<option value="软件技术" id="soft">软件技术</option>
				</select>
			</div>
			<div class="jainjie">
				<label>个人简介：</label>
				<textarea rows="1" cols="22" id="jianjie"></textarea>
			</div>
			<div class="touxiang">
				<label>头像：</label>
				<input type="file" />
			</div>
			
		</form>
		<span id="result1"></span>
		<span id="result2"></span>
		<span id="result3"></span>
		<span id="result4"></span>
		<span id="result5"></span>
		<span id="result6"></span>
		<span id="result7"></span>
	</body>
	<script type="text/javascript">
		window.onload = function(){
			let obtn = document.getElementById('submit')
		    obtn.onclick = function(){
				let user = document.getElementById("username").value
				document.getElementById('result1').innerText = username.value
				
				let pwd1 = document.getElementById("password1").value
				document.getElementById('result2').innerText = password1.value
				
				let pwd2 = document.getElementById("password2").value;
				document.getElementById('result3').innerText = password2.value
				
				let omap = new Map()
				omap.set('female','男')
				omap.set('male','女')
				let osex = document.getElementsByName('sex')
				osex.forEach(item=>{
					if(item.checked){
							let ovalue = item.value
							document.getElementById('result4').innerText = omap.get(ovalue)
					}
				})
			
				let ohobby = document.getElementsByName("hobby")
				let checkboxs = new Array();
				let hobbys=checkboxs.toString()
				for(let i=0;i<ohobby.length;i++){
					if(ohobby[i].checked)
					    hobbys+=ohobby[i].value+"、"
				}
				document.getElementById('result5').innerText = hobbys
				
				let ozhuangye = document.getElementById("zhuangye")
				let zy=""
				for(let i=0;i<ozhuangye.length;i++){
					if(ozhuangye.options[i].selected==true)
					    zy+=ozhuangye.options[i].text
				}
				document.getElementById('result6').innerText = zy
				
				let ojianjie = document.getElementById("jianjie").value
				document.getElementById('result7').innerText = jianjie.value
				
	       }
		}
		
		
	</script>
</html>
